<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
		<view class="box flex_ac flex_sb" :style="{'bottom':bottom}"
			v-if="!user.subscribe && (user.level == 2 || user.level == 3 || user.level == 5)">
			<view class="">
				点击关注公众号，接收订单消息推送
			</view>
			<view class="qgz" @click="showMask = true">
				去关注
			</view>
			<u-icon @click="closeSubscribe" size="36" name="https://img.aibbyp.com/wechatUser/aclose.png"></u-icon>
		</view>
		<u-mask :show="showMask" @click="showMask = false" :mask-click-able='false'>
			<view class="box2 flex_yy_center">
				<view class="">
					<image :show-menu-by-longpress='true' class="gzhewm" @longpress="handleLongPress"
						src="https://img.aibbyp.com/wechatUser/gzhewm.png" mode=""></image>
				</view>
				<u-icon @click="showMask = false" name="https://img.aibbyp.com/wechatUser/close2.png" size="50"
					style="margin-top: 74rpx;"></u-icon>
			</view>
		</u-mask>
		<!-- #endif -->
	</view>

</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		name: 'WXofficialAccount',

		data() {
			return {
				showMask: false,
				// 删除本地的 subscribe 属性，避免与 Vuex 冲突
				// subscribe: false, // ❌ 移除这行
			}
		},
		created() {
			console.log('Vuex 状态:', this.$store.state.user);
			console.log('计算属性 user:', this.user);
		},
		computed: {
			...mapState({
				// 显式映射 user 状态
				user: state => state.user,
				// 直接映射 subscribe 状态，便于模板使用
				isSubscribed: state => state.user.subscribe
			}),
			// 可选：添加一个计算属性检查状态是否已加载
			isSubscribeLoaded() {
				return this.user.subscribe !== undefined;
			}
		},
		props: {
			bottom: {
				type: String,
				default: '0'
			},
		},
		watch: {
			// 监听 user.subscribe 变化
			'user.subscribe'(newVal) {
				console.log('subscribe 状态已更新为:', newVal);
				if (newVal) {
					this.showMask = false
				}
			}
		},
		methods: {
			handleLongPress() {
				uni.vibrateShort();
			},
			closeSubscribe() {
				this.$store.dispatch('user/setWechatSubscribe', true)
					.then(() => {
						console.log('订阅状态更新成功');
						// 可选：更新后执行其他操作
						this.showMask = false;
					})
					.catch(error => {
						console.error('更新订阅状态失败:', error);
					});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.gzhewm {
		width: 478rpx;
		height: 602rpx;

	}

	.box2 {
		width: 100%;
		height: 100%;
	}

	.box {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		// bottom: 200rpx;
		left: 0;
		z-index: 999;
		padding: 18rpx 14rpx 20rpx 36rpx;
		background: rgba(0, 0, 0, 0.6);
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.qgz {
		background: #FD5241;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 8rpx 32rpx;
	}
</style>